<omv-intuition-page-header class="omv-sticky omv-z-10"></omv-intuition-page-header>
<div *ngIf="config.hints"
     class="omv-display-flex omv-flex-column"
     [ngClass]="{'omv-display-none': (pageStatus?.loading && pageStatus?.initialLoad) || pageStatus?.error}">
  <omv-alert-panel *ngFor="let hint of config.hints"
                   class="omv-flex-1 omv-m omv-mb-z"
                   [type]="hint.type"
                   [hasTitle]="false"
                   [hasMargin]="false"
                   [dismissible]="hint.dismissible"
                   [stateId]="hint.stateId">
    <span [innerHtml]="hint.text | transloco | template:pageContext | nl2br | sanitizeHtml"></span>
  </omv-alert-panel>
</div>
<mat-card [ngClass]="{'omv-display-none': (pageStatus?.loading && pageStatus?.initialLoad) || pageStatus?.error}">
  <ng-container *ngTemplateOutlet="renderCardHeader"></ng-container>
  <mat-card-content>
    <omv-intuition-form [id]="config.id"
                        [config]="config.fields">
    </omv-intuition-form>
  </mat-card-content>
  <mat-card-actions *ngIf="config.buttons.length"
                    class="omv-display-flex omv-flex-row"
                    [ngClass]="{'omv-justify-content-start': config.buttonAlign === 'start', 'omv-justify-content-center': config.buttonAlign === 'center', 'omv-justify-content-end': config.buttonAlign === 'end'}">
    <ng-container *ngFor="let button of config.buttons">
      <omv-submit-button *ngIf="button.template === 'submit'"
                         [form]="config.id"
                         [formGroup]="form.formGroup"
                         [disabled]="button.disabled || (pageContext._editing && form.formGroup.pristine)"
                         (buttonClick)="onButtonClick(button)">
        {{ button.text | transloco | template:pageContext }}
      </omv-submit-button>
      <button *ngIf="button.template !== 'submit'"
              mat-flat-button
              [class]="button.class"
              [disabled]="button.disabled"
              (click)="onButtonClick(button)">
        {{ button.text | transloco | template:pageContext }}
      </button>
    </ng-container>
  </mat-card-actions>
</mat-card>

<ng-template #renderCardHeader>
  <ng-container *ngIf="config.title || config.subTitle">
    <ng-container *ngIf="config.icon">
      <mat-card-header>
        <mat-icon mat-card-avatar
                  svgIcon="{{ config.icon }}">
        </mat-icon>
        <mat-card-title *ngIf="config.title">
          {{ config.title | transloco | template:pageContext }}
        </mat-card-title>
        <mat-card-subtitle *ngIf="config.subTitle">
          {{ config.subTitle | transloco | template:pageContext }}
        </mat-card-subtitle>
      </mat-card-header>
    </ng-container>
    <ng-container *ngIf="!config.icon">
      <mat-card-title-group>
        <mat-card-title *ngIf="config.title">
          {{ config.title | transloco | template:pageContext }}
        </mat-card-title>
        <mat-card-subtitle *ngIf="config.subTitle">
          {{ config.subTitle | transloco | template:pageContext }}
        </mat-card-subtitle>
      </mat-card-title-group>
    </ng-container>
  </ng-container>
</ng-template>
